<template>
    <div id="aplayer"  >
        <!-- 底部缩略图 --> 
        <!--  指定 lrcType 为 3，表示 audio.lrc 的值是 lrc 文件地址，
        将通过 `fetch` 获取 lrc 歌词文本。 -->
        <div  @mousedown="down($event)" @touchstart="down($event)" @mousemove="move($event)" @touchmove="move($event)"  @mouseup="end" @touchend="end">
            <aplayer :audio="audio" :lrcType="0"   ref="aplayer"  fixed   v-show="isAplayer" id="moveDiv"/>
        </div>
    </div>
</template>
<script>
import {mapGetters,mapState,mapMutations,mapActions} from "vuex";
export default {
    data () {
        return {
            isAplayers:null,
            musicList:{
                id:null,//音乐id
                title:null,//歌曲名字
                author:null,//作者
                img:null,//背景图
                url:null,//歌曲地址
                lrc:null,//歌词
                list:[],//歌曲列表
            },
            audio: [
                // {
                // name: this.musicList.title,
                // artist: this.musicList.author,
                // url: this.musicList.url,
                // cover: this.musicList.img, 
                // lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
                // },
            ],
            listFolded: false,
            //移动端拖动
            flags: false,
            position: { x: 0, y: 0 },
            nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
        }
    },
    computed: {
        ...mapState(["musicDetail","userInfo",'isAplayer'])
    },
    watch:{
        //vuex数据
        'musicDetail.list':{
             handler: function (newVal,oldVal) {
                //  console.log('newVal1',newVal)
                this.audio = [];
                newVal.forEach(res =>{
                    this.audio.push({
                        name: res.title,
                        artist: res.author,
                        url: res.url,
                        cover: res.img, 
                        lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
                    })
                })

                
             }
        },
        'musicDetail.title':{
            handler: function (newVal,oldVal) {
                // console.log('newVal2',newVal)
                // console.log('oldVal',oldVal)
                if(newVal !== oldVal){
                    this.$refs.aplayer.switch(newVal);
                }
            }
        },
        //监听数据变化，有数据的时候显示播放器
        // audio:{
        //      handler: function (newVal,oldVal) {
        //         // console.log('newVal',newVal)
        //         // console.log('oldVal',oldVal)
        //         // if(newVal.length>0){
        //         //     this.isAplayer = true;
        //         // }else{
        //         //     this.isAplayer = false;
        //         // }
        //     }
        // },
    },
    components: {
        
    },
    created () {
     
    },
    methods: {
       // 实现移动端拖拽
        down(event){
            this.flags = true;
            var touch;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            this.position.x = touch.clientX;
            this.position.y = touch.clientY;
            this.dx = moveDiv.offsetLeft;
            this.dy = moveDiv.offsetTop;
        },
        move(event){
            if(this.flags){
            var touch ;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            this.nx = touch.clientX - this.position.x;
            this.ny = touch.clientY - this.position.y;
            this.xPum = this.dx+this.nx;
            this.yPum = this.dy+this.ny;
            moveDiv.style.left = this.xPum+"px";
            moveDiv.style.top = this.yPum +"px";
            //阻止页面的滑动默认事件
            document.addEventListener("touchmove",function(){ // 1.2 如果碰到滑动问题，请注意是否获取到 touchmove
                event.stopPropagation();//冒泡事件
                // event.stopPropagation(); // 如果没有引入jq 就用 stopPropagation()
            },false);
            }
        },
        //鼠标释放时候的函数
        end(){
            //移动结束 移动到侧边时  隐藏播放器
            if(this.xPum<-20){
                this.isAplayers = false;
                this.$store.commit('getAplayer',this.isAplayers)
            }
            this.flags = false;
        },
                
    },
}
</script>
<style lang='less'>
    #aplayer{
        .aplayer.aplayer-fixed .aplayer-body{
            bottom: 0px;
            position: absolute;
        }
        .aplayer.aplayer-fixed .aplayer-lrc{
            bottom: 66px;
            height: 15px;
            z-index: 100;
        }
        .aplayer{
            height: 66px;
            z-index: 9999;
        }
        .aplayer.aplayer-fixed:after{
            content: " ";

        }
       
    }
</style>

